<template>
  <div class="search-associate">
    <van-cell v-for="(item,index) in associateList" :key="index" icon="search">
      <div slot="title" v-html="highlight(item)" @click="$emit('ASSOCIATE',item)"></div>
    </van-cell>
  </div>
</template>

<script>
import { searchAssociate } from "@/api/axios";
import { debounce } from "lodash";
export default {
  name: "SearchAssociate",
  data() {
    return {
      associateList: [] //联想词汇列表
    };
  },
  props: {
    keyword: { type: String }
  },
  watch: {
    keyword: {
      handler: debounce(function(newV) {
        this.getKeyKord(newV);
      }, 400),
      immediate: true //进入时立即监听
    }
  },
  methods: {
    async getKeyKord(params) {
      const { data: res } = await searchAssociate(params);
      console.log(res);
      this.associateList = res.data.options;
    },
    highlight(data){
        let patter= new RegExp(this.keyword,'ig')
        return data.replace(patter,`<span style='color:red'>${this.keyword}</span>`)

    }
  }
};
</script>

<style scoped>
</style>